<!--
/**
* Author: linchun
* Date: 2022-09-14 11:54
* Desc: bindMobile 绑定手机号
*/
-->
<template>
  <view class="bind-mobile">
    <!-- 绑定手机 -->
    <view>
      <view class="f1">绑定手机号</view>
      <view class="f2">为保障账号安全，请绑定手机号</view>
      <view class="form-box">
        <!-- 手机号 -->
        <zm-input
          type="number"
          placeholder="请输入手机号"
          class="input"
          :custom-style="{
            borderBottom: '1rpx solid #eee',
            padding: '20rpx 0'
          }"
          :placeholder-style="{ color: '#323233', fontSize: '30rpx' }"
          :prefix-icon-style="{ marginRight: '18rpx' }"
          v-model="form.bindingMobile"
          :prefix-icon="'login-tel'"
          @input="handleMobileInput"
        >
        </zm-input>
        <!-- 验证码 -->
        <zm-input
          type="number"
          :maxlength="6"
          placeholder="请输入验证码"
          class="input"
          :custom-style="{
            borderBottom: '1rpx solid #eee',
            padding: '20rpx 0'
          }"
          :placeholder-style="{ color: '#323233', fontSize: '30rpx' }"
          :prefix-icon-style="{ marginRight: '18rpx' }"
          v-model="form.code"
          :prefix-icon="'login-code'"
          @input="handleCodeInput"
        >
          <template slot="suffix">
            <yy-send-code :second="expire" @myTap="handleSendCode" @finish="handleCountDownFinish" type="normal" ref="sendCode" slot="button" />
          </template>
        </zm-input>
      </view>
      <view class="form-btn__footer flex-c-m">
        <view class="form-btn__code" :class="extClass" @click="handelBind"> 确认绑定 </view>
      </view>
    </view>
  </view>
</template>

<script>
  import ZmInput from '@/commons/ZmInput/index.vue'
  export default {
    name: 'bind-mobile',
    components: { ZmInput },
    data() {
      return {
        expire: 60,
        isDisabled: true, //禁用按钮标识
        isSend: false, // 是否发送验证码
        form: {
          bindingMobile: '',
          code: ''
        }
      }
    },
    computed: {
      extClass() {
        return this.isDisabled ? 'disabledBind' : ''
      }
    },
    methods: {
      handleCountDownFinish() {
        this.isSend = false
      },
      handleMobileInput(val) {
        this.form.bindingMobile = val
        this.changeDisabledStatus()
      },
      handleCodeInput(code) {
        if (code && code.length === 6) {
          //输入6位验证码
          this.form.code = code
        }
        this.changeDisabledStatus()
      },
      handleSendCode() {
        if (!this.form.bindingMobile) {
          this.$msg.toast('请输入手机号')
          return
        }
        // if (!this.$auth.validateTel(this.form.bindingMobile)) {
        //   this.$msg.toast('手机号输入格式有误')
        //   return
        // }
        const data = {
          mobile: this.form.bindingMobile,
          codeType: 'bindMobile'
        }
        this.$msg.loading()
        uni.$api.public
          .sendSms(data)
          .then((res) => {
            this.$msg.hideLoading()
            this.form.code = ''
            this.isSend = true
            this.$msg.toast('短信验证码发送成功')
            console.log('res.expire', res.expire)
            this.expire = +res.expire || 60
            const sendCodeRef = this.$refs.sendCode
            this.$nextTick(() => {
              sendCodeRef.begin()
            })
          })
          .catch((err) => {
            this.$msg.hideLoading()
            this.$msg.toast((err.data && err.data.content) || '发送失败,请稍后再试')
            this.isSend = true
            this.form.code = ''
            const timer = setTimeout(() => {
              clearTimeout(timer)
              this.isSend = false //5秒后可重新发送验证码
            }, 5000)
          })
      },
      handelBind() {
        if (this.isDisabled) {
          //按钮禁用
          return
        }
        const msg = this.validateInput()
        if (msg) {
          this.$msg.toast(msg)
          return
        }
        if (!this.isSend) {
          this.$msg.toast('请先发送短信获取验证码!')
          this.form.code = ''
          return
        }
        this.handleSubmit()
      },
      handleSubmit() {
        this.$msg.loading()
        uni.$api.user
          .bindMobile(this.form)
          .then(() => {
            this.$msg.hideLoading()
            // this.$uMeng.trackEvent('edit_user_information', 'type', 'phone')
            this.$msg.toast('绑定成功')
            this.$auth.toGetUserInfo(true).then((res) => {
              console.log('绑定手机号====', res.bindingMobile)
              if (res.bindingMobile) {
                uni.navigateBack({
                  //默认1为返回上一级
                  delta: 1
                })
              }
            })
          })
          .catch((err) => {
            console.log('err====', err)
            this.$msg.hideLoading()
          })
      },
      validateInput() {
        let str = ''
        if (!this.form.bindingMobile) {
          str = '手机号不能为空'
        } else if (!this.$auth.validateTel(this.form.bindingMobile)) {
          str = '手机号输入有误'
        }
        return str
      },
      changeDisabledStatus() {
        //验证码登录
        if (this.form.bindingMobile && this.form.code) {
          this.isDisabled = false
        } else {
          this.isDisabled = true
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .bind-mobile {
    width: 100%;
    height: 100%;
    padding: 90rpx 40rpx 40rpx 40rpx;
    box-sizing: border-box;
    background: #fff;
    font-size: #333;
    .f1 {
      font-size: 60rpx;
    }
    .f2 {
      font-size: 32rpx;
      margin-top: 60rpx;
    }
    .form-box {
      width: 100%;
      font-size: 32rpx;
      margin-top: 60rpx;
    }
    .form-btn {
      &__footer {
        margin-top: 80rpx;
        width: 100%;
        height: 100rpx;
      }
      &__code {
        width: 710rpx;
        text-align: center;
        height: 100rpx;
        line-height: 100rpx;
        background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
        border-radius: 20rpx;
        font-size: 36rpx;
        font-weight: 400;
        color: #ffffff;
        &.disabledBind {
          opacity: 0.4;
          // background: #dfdfdf;
        }
      }
    }
  }
</style>
